<template>
  <div class="permisson">
    <p class="role_title">角色</p>
    <p class="role_name">
      <span v-if="userRoleName === 'visitor'">团队管理员</span>
      <span v-else-if="userRoleName === 'manager'">系列组管理员</span>
      <span v-else-if="userRoleName === 'finance'">账号财务</span>
      <span v-else-if="userRoleName === 'readOnly'">广告只读</span>
      <span v-else-if="userRoleName === 'advManager'">广告管理员</span>
      <span v-else>系列组只读</span>
    </p>
      <el-table :data="AutData" style="position:relative;top:12px;margin-bottom: 40px;">
        <el-table-column fixed prop="name" label="类型" width="300"> </el-table-column>
        <el-table-column fixed label="范围">
          <template slot-scope="scope">
            <span v-if="scope.row.typeId === 5 && JSON.stringify(scope.row.object) !== '{}'">
                <el-popover placement="top-start" title="" width="400" trigger="hover" :content="text">
                <span class="tip_text" slot="reference"> {{text}} </span>
              </el-popover>
            </span>
            <span v-else-if="scope.row.typeId === 3 && scope.row.object.length > 1">
                <el-popover placement="top-start" title="" width="400" trigger="hover" :content="userName">
                <span class="tip_text" slot="reference"> {{userName}} </span>
              </el-popover>
            </span>
            <span v-else-if="scope.row.typeId === 1 && scope.row.object">
                <el-popover placement="top-start" title="" width="400" trigger="hover" :content="zzText">
                <span class="tip_text" slot="reference"> {{zzText}} </span>
              </el-popover>
            </span>
            <span v-else-if="scope.row.typeId === 2 && scope.row.object">
                <el-popover placement="top-start" title="" width="400" trigger="hover" :content="xtText">
                <span class="tip_text" slot="reference"> {{xtText}} </span>
              </el-popover>
            </span>
            <span v-else-if="!scope.row.object && scope.row.roleId === 2 ">全部</span>
            <span v-else-if="!scope.row.object && scope.row.roleId === 49 ">全部</span>
            <span v-else-if="!scope.row.object && scope.row.roleId === 44 ">全部</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import {
  permission
} from '@/api/user.js'
export default {
  name: 'Permisson',
  data(){
    return {
      AutData: '',
      text: '',
      userName: '',
      xtText: '',
      zzText: ''
    }
  },
  props: {
    userRoleName: String
  },
  mounted() {
    this.getPermission()
  },
  computed: {
    isSymol() {
      return this.$store.state.user.unit === 'USD' ? '$' : '￥'
    },
    teamId() {
      return this.$store.state.team.teamId
    }
  },
  methods:{
    async getPermission() {
      let data = {
        teamId: this.teamId
      }
      const res = await permission(data)
      if (res.data.code === 20000) {
        this.AutData = res.data.data
        this.text = ''
        this.userName = ''
        res.data.data.forEach(item => {
          let data = item.object
          if (data && typeof data !== Object) {
            if (item.typeId === 5) {
              for (let i in data) {
                let dataOrg = data[i]
                if (dataOrg.roleName !== 'invalid_client') {
                  this.text +=  '【' + i+ '】' + ','
                }
              }
            } else if (item.typeId === 3) {
              data.forEach(element => {
                if (element.roleName !== this.userRoleName) {
                  element.nickName = element.nickName ? element.nickName : '-'
                  this.userName += '【' + element.nickName + '】' + ','
                }
              })
            } else if (item.typeId === 1) {
              for (let i in data) {
                  this.zzText +=  '【' + i+ '】' + ','
              }
            } else if (item.typeId === 2) {
              data.forEach(element => {
                for (let k in element) {
                 let data = element[k]
                 data.org.forEach(item => {
                   this.xtText += '【' + item.orgName + '】' + ','
                 })
                }
              })
            }
            this.text=(this.text.substring(this.text.length-1)===',')?this.text.substring(0,this.text.length-1):this.text;
            this.userName=(this.userName.substring(this.userName.length-1)===',')?this.userName.substring(0,this.userName.length-1):this.userName;
            this.zzText=(this.zzText.substring(this.zzText.length-1)===',')?this.zzText.substring(0,this.zzText.length-1):this.zzText;
            this.xtText=(this.xtText.substring(this.xtText.length-1)===',')?this.xtText.substring(0,this.xtText.length-1):this.xtText;
          }
        })
      } else {
        this.$message.error('查看权限明细失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.role_title{
  font-size: 14px;
  color: #1D2129;
  font-weight: 400;
  font-family: PingFang SC;
  margin-top: -8px;
}
.role_name {
  font-size: 14px;
  font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
  color: #1D2129 !important;
  margin: 12px 0;
}
.permisson /deep/ .el-table__fixed::before {
    // background-color:#fff !important;
    height: 0px ;
  }
.el-tooltip {
  width: 30%;
}
.tip_text{
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
　text-overflow: ellipsis;
}
</style>
